<template>
    <el-row id="app"  type="flex"  justify="center" align="middle" :style="''">
        <el-col class="loginBox">
            <el-row type="flex">
                <el-col :span="14" class="logoBox" >
                    <el-row style="height: 100%"  type="flex"  justify="center" align="middle">
                        <el-col :span="15">
                            <el-image  :src="logoUrl" style="width: 100%"></el-image>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="10" class="zform">
                    <el-row type="flex" justify="center" align="middle" style="height: 100%" >
                        <el-col :span="16" class="list">
                            <el-row  type="flex" >
                                <el-col :span="24" class="headWords"><b>{{initData.enTitle}}&nbsp;<span>&nbsp;{{initData.version}}</span></b></el-col>
                            </el-row>
                            <el-row  type="flex">
                                <el-col :span="24" class="headSpan">{{initData.title}}</el-col>
                            </el-row>
                            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top: 50px">
                                <el-form-item  prop="user" label-width="0">
                                    <el-input v-model="ruleForm.user"  placeholder="请输入账号" clearable></el-input>
                                </el-form-item>
                                <el-form-item  prop="pass" label-width="0">
                                    <el-input  v-model="ruleForm.pass" placeholder="请输入密码" show-password></el-input>
                                </el-form-item>
                                <el-form-item label-width="0">
                                    <el-button type="primary" style="width: 100%"  @click="submitForm('ruleForm')">提交</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>
<script>
    export default {
        name: "Login",
        data(){
            return {
                initData:{
                    title:"综合物业管理平台",
                    enTitle:"WE UPM",
                    version:"1.3"
                },
                logoUrl:require('../assets/logo.png'),
                ruleForm: {
                    user: '',
                    pass: '',
                },
                rules: {
                    user: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 5, max: 18, message: '长度在 5 到 18 个字符', trigger: 'blur' },
                        {
                            required: true,
                            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
                            message: '账号不支持特殊字符',
                            trigger: 'blur'
                        }
                    ],
                    pass: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 18, message: '长度在 6 到 20 个字符', trigger: 'blur' },
                        {
                            required: true,
                            pattern: /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/,
                            message: '请输入正确的密码',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        mounted() {

        },
        methods:{
            submitForm() {
                this.$emit('login');
            }
        }

    }
</script>

<style  scoped>
    #app{
        background:url("../assets/bg.jpeg");
    }
    .loginBox{
        width: 850px;
        height: 500px;
    }
    .loginBox>div{
             height: 100%;
         }
    .logoBox{
        background:linear-gradient(-45deg,   rgba(255,255,255,.1),rgba(255,255,255,.6));
    }
    .zform{
        background: #ffffff;
    }
    .headWords{
        font-size: 30px;
        text-align: center;
        color: #409EFF;
        font-family: Helvetica;
    }
    .headWords span{
        font-size: 14px;
        color: #F56C6C;
    }
    .headSpan{
        font-size: 16px;
        color: #909399;
        text-align: center;
        font-family: "微软雅黑";
    }
</style>